<template>
	<view>
		<!-- 标题 -->
		<view class="title">
			<view class="navbar">
				<text>穿衣科普</text>
			</view>
			<view class="tabs">

				<u-tabs :list="list" :is-scroll="true" :current="current" @change="change" active-color="yellow"
					inactive-color="#fff" bg-color="#4057DD"></u-tabs>
			</view>
		</view>
		<view class="section parentWrap">
			<!-- <view class="card" v-for="(value, index) in tableData" :key="index" @click="gotoDetail(value)" 
			style="width:100%;height:280rpx;display: flex;align-items:center">
				<image :src="value.cover" mode=""></image>
				<view class="txt">
					<text style="font-size: 38rpx;font-weight: bold;"
						class="fn-ellip2">{{ value.title.length>22?value.title.substring(0,22)+'...':value.title }}</text>

					<div style='font-size:36rpx;color:#999' v-html="ellipsis(value.content)"></div>

					<view>
					</view> -->
			<view class="card" v-for="(value, index) in tableData" :key="index" @click="gotoDetail(value)"
				style="width:100%;height:250rpx;">
				<text style="font-size: 38rpx;font-weight: bold;"
					class="fn-ellip2">{{ value.title.length>16?value.title.substring(0,16)+'...':value.title }}</text>
				<view class="" style="display: flex;align-items: center;">
					<image :src="value.cover" mode="" style="width:220rpx;height:160rpx"></image>
					<view class="txt">


						<div style='font-size:36rpx;color:#999' v-html="ellipsis(value.content)"></div>

						<view>
						</view>

					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tableData: [],
				total: 0,
				btnnum: 0,
				id: '',
				list: [],
				listindex: [{
					id: '1475744664106659841'
				}, {
					id: '1421714522634637313'
				}, {
					id: '1475744664106659841'
				}, {
					id: '1421714522634637313'
				}, {
					id: '1475744664106659841'
				}],
				// list: [],
				// listindex:[],
				current: 0
			}
		},
		onLoad() {
			this.newTypeList();

		},
		methods: {
			onPullDownRefresh() {

			this.newList();
			},
			ellipsis(value) {
				value = value.replace(/<.*?>/ig, ""); //把v-html的格式标签替换掉
				if (value.length > 31) {
					return value.slice(0, 31) + "...【阅读全文】";
				} else {
					return value
				}

			},
			async newTypeList() {
				// let tpl_param = {
				// 	pid: "1475744664106659841"
				// };
				// uni.showLoading({
				// 	title: '加载中',
				// 	mask: true
				// });
				let res = await this.$api.newTypeList();
				
				if (res.code == 200) {
					// console.log("内容："+res.result);
					this.listindex = res.result.list;
					this.list = res.result.names[1];
					this.current = 1;
					this.id = this.listindex[1].id;
					this.newList(this.listindex[1].id);
				} else {
					uni.showToast({
						icon: 'none',
						title: res.message || '获取最后一次数据失败'
					});
				}
				// uni.hideLoading();
			},
			async newList() {

				let tpl_param = {
					pid: this.id
				};
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				let res = await this.$api.newsList(tpl_param);
				wx.stopPullDownRefresh()
				if (res.code == 200) {
					// console.log(res);
					this.tableData = res.result.list;
					console.log(this.tableData);
					this.total = res.result.total;
				} else {
					uni.showToast({
						icon: 'none',
						title: res.message || '获取最后一次数据失败'
					});
					this.tableData = []
				}
				uni.hideLoading();

			},
			change(e) {
				// console.log(e);
				// this.current = e;
				// console.log(this.listindex[e].id);				
				this.current = e;
				this.id = this.listindex[e].id;
				this.newList();
			},
			gotoDetail(e) {
				uni.navigateTo({
					url: 'ParentingDetails/ParentingDetails?id=' + e.id,
					//url: '/pages/tabbar/tabbar-4/detail?detailDate=' + encodeURIComponent(JSON.stringify(e))
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	// 头部
	.title {
		position: fixed;
		z-index: 1;
	}

	.navbar {
		padding-top: 100rpx;
		padding-bottom: 20rpx;
		width: 750rpx;
		text-align: center;
		background-color: #4057DD;
	}

	.navbar>text {
		font-size: 36rpx;
		font-weight: bold;
		color: #fff;
	}

	.tabs {
		padding-bottom: 20rpx;
		background-color: #4057DD;
	}

	.icon-left {
		margin-top: 20rpx;
		margin-left: 10rpx;
	}

	.end-title {
		display: flex;
	}

	.end-title view {
		flex-grow: 1;
		text-align: center;
	}

	.end-cont {
		display: none;
		background: #C8C7CC;
	}

	.btna {
		color: #FFFFFF;
		background: #00A0FF;
	}

	.dis {
		display: block;
	}

	// 内容
	.section {
		background-color: rgb(247, 247, 247);
		padding: 30rpx;
	}

	.section>view {
		background-color: #fff;
		padding: 15rpx;
		border-radius: 20rpx;
		position: relative;
		margin-bottom: 20rpx;
		margin-top: 30rpx;
	}

	.card>image {
		width: 200rpx;
		height: 220rpx;
		display: flex;
	}

	.txt {
		width: 100%;
		top: 10%;
		font-size: 24rpx;
		margin-left: 12rpx;
	}

	.txt>view>text {
		color: #445CDF;
	}

	.parentWrap {
		padding-top: 266rpx;
	}

	.fn-ellip2 {
		word-break: break-all;
		word-wrap: break-word;
		overflow: hidden;
		white-space: normal;
		text-overflow: ellipsis;
		display: -webkit-inline-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
</style>
